<template>
  <div style="position: relative;">
    <div class="top">
      <span class="top-left">lativ诚衣</span>
      <div class="top-right">
        <span class="iconfont top-right-more">&#xe61d;</span>
        <span class="iconfont top-right-more">&#xe7e7;</span>
      </div>
    </div>
    <div class="search-box">
      <div class="search">
        <span class="ss-con iconfont">&#xe600;</span>
        <input type="text" placeholder="搜索商品">
      </div>
    </div>
    <div class="content-box">
      <div class="content1" @click="addClass($event)">综合</div>
      <div class="content1" @click="addClass($event)">销量</div>
      <div class="content1" @click="addClass($event)">新品</div>
      <div class="content1" @click.stop="price($event)">价格<i class="iconfont" @click.stop="">&#xe684;</i></div>
    </div>
    <!-- tab+content切换组件 -->
    <Banner :TabList="TabList" @changeTab="changeTab">
      <!-- content组件 -->
      <List :ContentList="GoodList" />
    </Banner>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios';
import Banner from './common/Banner.vue';
import List from './common/List.vue';
// import Tabbar from "./footer.vue";
// import { useRoute } from "vue-router";
let TabList = ref([])
let GoodList = ref([])
let flag = ref(false)
// let tabbarList = ref([
//   { name: "首页", path: "/home", img: 'iconfont icon-shouye', img2: 'iconfont icon-shouye' },
//   { name: "分类", path: "/", img: 'iconfont icon-fenlei', img2: 'iconfont icon-fenlei' },
//   { name: "购物车", path: "/", img: 'iconfont icon-gouwuche', img2: 'iconfont icon-gouwuche' },
//   { name: "个人", path: "/my", img: 'iconfont icon-geren', img2: 'iconfont icon-geren' }
// ])
// let showTabBar = ref(true)
// 点击切换
function changeTab(val) {
  // GoodList
  axios.get(`http://127.0.0.1:4523/m1/3884971-0-default/goodlist/${val}`).then((res) => {
    // console.log(res);
    if (res.status === 200) {
      GoodList.value = res.data.result
      console.log('GoodList' + val, GoodList.value)
    }
  })
}
// 价格升降序切换
function price(e) {
  flag = !flag
  console.log(flag);
  // 当flag值为true时，降序排列
  if (flag) {
    GoodList.value.sort((a, b) => {
      return a.price - b.price
    })
    // 当flag值为false时，升序排列
  } else {
    GoodList.value.sort((a, b) => {
      return b.price - a.price
    })
  }
  addClass(e)
}
// 添加类名
function addClass(e) {
  // 全部内容
  let all = document.querySelectorAll('.content1')
  // 先将每一个都删除active类名
  all.forEach((item) => {
    item.classList.remove('active')
  })
  // 当前点击项
  // console.log(e);
  // 再将当前点击的项添加一个active类名
  e.target.classList.add('active')
}
// 使用watch监听路由变化
// watch(
//   () => useRoute(),
//   (to, from) => {
//     // 根据当前路由判断是否显示 tab-bar
//     showTabBar.value = !to.meta.hideTabBar;
//   }
// )
onMounted(() => {
  // TabList
  axios.get('http://127.0.0.1:4523/m1/3884971-0-default/tablist').then((res) => {
    // console.log(res);
    if (res.status === 200) {
      TabList.value = res.data.result
      console.log('TabList', TabList.value)
    }
  })
  // GoodList
  changeTab(1)
})
</script>

<style lang="scss" scoped>
$width: 100%;
$height: 100%;

.active {
  color: #b90d27 !important;
}

.top {
  position: fixed;
  top: 0;
  z-index: 10;
  width: $width;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  padding: 5px 0px;
  font-size: 14px;
  background-color: #fff;

  .top-left {
    margin-left: 10px;
  }

  .top-right {
    width: 88px;
    height: 28px;
    border: 2px solid #f2f2f2;
    border-radius: 50px;
    display: flex;
    align-items: center;
    margin-right: 10px;

    .top-right-more {
      display: block;
      width: 43px !important;
      text-align: center;
      border-right: 2px solid #f2f2f2;
      font-size: 18px;
    }
  }
}

.search-box {
  position: fixed;
  top: 45px;
  z-index: 10;
  width: $width;
  height: 45px;
  background-color: #fff;

  .search {
    width: 94%;
    height: 28px;
    background-color: #f2f2f2;
    border-radius: 20px;
    line-height: 28px;
    display: flex;
    margin-left: 3%;

    .ss-con {
      font-size: 20px;
      color: #cccccc;
      margin-left: 10px;
    }

    input {
      width: 80%;
      outline: none;
      border: 0;
      background-color: #f2f2f2;

      &::placeholder {
        color: #cccccc;
        padding-left: 5px;
        font-size: 12px;
      }
    }
  }
}

.content-box {
  position: fixed;
  display: flex;
  align-items: center;
  top: 118px;
  z-index: 10;
  width: $width;
  height: 53px;
  background-color: #fff;

  .content1 {
    padding: 0 10px;
    font-size: 17px;
    color: #999;
    font-weight: 550;
    margin-right: 20px;
  }
}
</style>